<!--
 * @Author: 宋杰
 * @Date: 2021-01-04 14:09:50
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-28 18:15:18
 * @Description: 一家十一口(猜一字) 机构管理 >> 修改
-->
<template>
  <div class="div1">
    <!-- 修改 -->
    <div class="div2">
      <div class="div2_top">机构信息</div>
      <div @click="back" style="float: right; margin-top: -53px;"> <el-button type="primary">返回</el-button></div>
      <div class="div2_con">
        <div>
          <div>
            <span>法人姓名 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.legalPersonName" clearable>
            </el-input>
          </div>
          <div>
            <span>法人身份证 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.legalPersonIdAdd" clearable>
            </el-input>
          </div>
          <div>
            <span>办学许可证 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.schoolLicense" clearable>
            </el-input>
          </div>
          <div>
            <span>收费许可证 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.chargingLicense" clearable>
            </el-input>
          </div>
          <div>
            <span>教师队伍 ：</span>
            <div class="div2_con1">
              <el-link type="primary">{{ Modify.teacherTeam }}</el-link>
              <i class="el-icon-download"></i>
              <el-button class="chakanbtn" type="primary" plain>上传</el-button>
            </div>
          </div>
          <div>
            <span>办公面积 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.officeArea" clearable>
            </el-input>
          </div>
          <div>
            <span>教学面积 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.teachingArea" clearable>
            </el-input>
          </div>
          <div>
            <span>经营内容 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.businessContent" clearable>
            </el-input>
          </div>
        </div>
        <div>
          <div>
            <span>省市选择 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.city" clearable>
            </el-input>
          </div>
          <div>
            <span>详细地址 ：</span>
            <el-input placeholder="请输入内容" v-model="Modify.detailAddress" clearable>
            </el-input>
          </div>
          <div class="div2_con2">
            <span>营业执照 ：</span>
            <div class="div2_con3">
              <span>{{ Modify.businessLicenseAdd }}</span>
              <i  class="el-icon-error  iconshanchu"></i>
              <el-button class="chakanbtn chakanbtn1" type="primary" plain>上传</el-button>
            </div>
          </div>
          <div class="div2_con2">
            <span>法人身份证 ：</span>
            <div class="div2_con3">
              <span>{{ Modify.CorporateIdCard }}</span>
              <i  class="el-icon-error  iconshanchu"></i>
              <el-button class="chakanbtn chakanbtn1" type="primary" plain>上传</el-button>
            </div>
          </div>
          <div>
            <span>其他补充材料 ：</span>
            <div class="div2_con1">
              <el-link type="primary">{{ Modify.supplementaryMaterialsAdd }}</el-link>
              <i class="el-icon-download"></i>
              <el-button class="chakanbtn" type="primary" plain>上传</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="div2_foot">
        <el-button type="primary" plain>取消修改</el-button>
        <el-button type="primary" @click="modifydata">修改保存</el-button>
      </div>
    </div>
    <!-- 修改end -->

    <!-- 机构经营项目 -->
    <div class="div3">
      <div class="topBox3">
        <span class="div3_top">机构经营项目一览</span>
        <div class="topBox3_sou">
          <!-- 日期 -->
          <div class="topBox3_sou1">
            <span>日期: </span>
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
          <div>
            <span>开班信息: </span>
            <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
          </div>
          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>

      <!-- con -->
      <div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="serialNumber" label="序号"> </el-table-column>
          <el-table-column prop="kaiban" label="开班信息"> </el-table-column>
          <el-table-column prop="renyuan" label="教务人员"> </el-table-column>
          <el-table-column prop="zhuanjian" label="授课专家"> </el-table-column>
          <el-table-column prop="ApplicationDate" label="开设时间">
          </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 机构经营项目 end -->

    <!-- 机构信用奖罚一览 -->
    <div class="div4">
      <div class="topBox3">
        <span class="div3_top">机构信用奖罚一览</span>
        <div class="topBox3_sou">
          <!-- 日期 -->
          <div class="topBox3_sou1">
            <span>日期: </span>
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>

      <!-- con -->
      <div>
        <el-table :data="tableData2" stripe style="width: 100%">
          <el-table-column prop="serialNumber" label="序号"> </el-table-column>
          <el-table-column prop="duixiang" label="奖惩对象"> </el-table-column>
          <el-table-column prop="name" label="项目名称"> </el-table-column>
          <el-table-column prop="zhuanjian" label="授课专家"> </el-table-column>
          <el-table-column prop="type" label="奖惩类型"> </el-table-column>
          <el-table-column prop="liyou" label="奖惩理由"> </el-table-column>
          <el-table-column prop="time" label="开设时间"> </el-table-column>
          <el-table-column prop="fangfan" label="奖惩方案"> </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >修改</el-button
              >
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 机构信用奖罚一览end -->
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      // 获取这个项目的id
      organizationId: this.$route.params.organizationId,
      
      // 修改
      Modify: {},

      // 开班信息
      inputValue: "",
      // 日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value2: "",
      tableData: [
        {
          serialNumber: "1",
          kaiban: "培训一班",
          renyuan: "张远",
          zhuanjian: "王强",
          ApplicationDate: "2020.2.6",
          state: "开启"
        },
        {
          serialNumber: "2",
          kaiban: "培训一班",
          renyuan: "张远",
          zhuanjian: "王强",
          ApplicationDate: "2020.2.6",
          state: "开启"
        },
        {
          serialNumber: "3",
          kaiban: "培训一班",
          renyuan: "张远",
          zhuanjian: "王强",
          ApplicationDate: "2020.2.6",
          state: "开启"
        }
      ],
      tableData2: [
        {
          serialNumber: "1",
          duixiang: "机构",
          name: "培训一班",
          zhuanjian: "张远",
          type: "惩罚",
          liyou: "教学事故",
          time: "2020.2.6",
          fangfan: "扣1分",
          state: ""
        },
        {
          serialNumber: "2",
          duixiang: "机构",
          name: "培训一班",
          zhuanjian: "张远",
          type: "惩罚",
          liyou: "教学事故",
          time: "2020.2.6",
          fangfan: "扣1分",
          state: ""
        },
        {
          serialNumber: "3",
          duixiang: "机构",
          name: "培训一班",
          zhuanjian: "张远",
          type: "惩罚",
          liyou: "教学事故",
          time: "2020.2.6",
          fangfan: "扣1分",
          state: ""
        },
        {
          serialNumber: "4",
          duixiang: "机构",
          name: "培训一班",
          zhuanjian: "张远",
          type: "惩罚",
          liyou: "教学事故",
          time: "2020.2.6",
          fangfan: "扣1分",
          state: ""
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.ObtainOI()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 获取机构信息数据
    ObtainOI() {
      console.log("organizationId", this.organizationId);
      let data = this.organizationId;
      this.$fetch("business/organization/1", data)
        .then(res => {
          console.log("获取机构信息数据res", res);
          if (res.code == 200) {
            this.Modify = res.data;
          }
        })
        .catch(err => {
          console.log("获取机构信息数据err", err);
        });
    },

    // 修改
    modifydata() {
      console.log('Modify',this.Modify)
      // let Modify = this.Modify
      // let list = JSON.stringify(Modify)
      let data = {
        organizationId:this.organizationId,
        // list: list
        legalPersonName : this.Modify.legalPersonName,//法人名称
        legalPersonIdAdd : this.Modify.legalPersonIdAdd ,// 法人身份证
        schoolLicense : this.Modify.schoolLicense, // 办学许可证
        chargingLicense : this.Modify.chargingLicense, //收费许可证
        teacherTeam : this.Modify.teacherTeam, // 教师队伍
        officeArea : this.Modify.officeArea, //办公面积
        teachingArea : this.Modify.teachingArea, //教学面积
        businessContent : this.Modify.businessContent,//经营内容
        city : this.Modify.city , //省市选择
        detailAddress : this.Modify.detailAddress, //详细地址
        businessLicenseAdd : this.Modify.businessLicenseAdd, // 营业执照
        CorporateIdCard : this.Modify.CorporateIdCard, // 法人身份
        supplementaryMaterialsAdd : this.Modify.supplementaryMaterialsAdd, // 补充材料
      };
      // console.log('Modify333333',typeof JSON.stringify(data.Modify))
      this.$put("business/organization", data)
        .then(res => {
          console.log("修改res", res);
        })
        .catch(err => {
          console.log("修改err", err);
        });
    },
    
    // 操作
    handleClick(row) {
      console.log(row);
      this.$router.push({ name: "EvaluationAuditProcessPage" });
    },
    back(){
        this.$router.go(-1);//返回上一层
    },
  }
};
</script>
<style scoped>
.div1 {
  /* border: 1px solid #000; */
  background: #f5f6fa;
}
.div2,
.div3,
.div4 {
  margin-bottom: 20px;
  background: #fff;
  /* border-radius: 8px; */
  padding: 10px;
}
.div2 {
  /* border: 1px solid rgb(240, 32, 32); */
}
.div3 {
  /* border: 1px solid rgb(12, 236, 12); */
}
.div4 {
  /* border: 1px solid rgb(200, 243, 8); */
  margin-bottom: 0;
}

/* 机构信息 */
.div2_top {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 20px;
}
.div2_con {
  display: flex;
  justify-content: center;
  align-items: center;
}
.div2_con > div {
  flex: 1;
  /* border: 1px solid #000; */
  /* height: 242px; */
}
.div2_con > div > div {
  display: flex;
  /* justify-content: space-between; */
  text-align: left;
  height: 40px;
  line-height: 40px;
}
.div2_con > div > div > :nth-child(1) {
  min-width: 80px;
}
.div2_con > div > div > :nth-child(2) {
  /* border: 1px solid #000; */
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 20px;
}
.div2_con > div > div > :nth-child(2)>i {
  flex: 1;
  text-align: left;
}

/* 修改 样式 */
.div2_con>>>.el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
.chakanbtn {
  width: 60px;
  height: 28px;
  line-height: 28px;
  padding: 0;
  font-size: 12px;
  text-align: center;
}
.chakanbtn1 {
  align-self:flex-end;
}
/* 红色删除 */
.iconshanchu {
  font-size: 16px;
  color: red;
  position: absolute;
  top: -5px;
  left: 60px;
}
/* 修改 样式end */

/* 文件。doc */
.div2_con1 {
  display: flex;
  align-items: center;
  color: rgb(248, 177, 44);
}
.div2_con1 >>> .el-icon-download:before {
  font-size: 14px;
}
.div2_con1 >>> .el-link {
  color: rgb(248, 177, 44);
  text-decoration: none;
  font-size: 12px;
  margin-right: 6px;
}
.div2_con1 >>> .el-link:after {
  display: none !important;
}
/* 文件 end */

/* 图片 */
.div2_con2 {
  height: 100px !important;
  line-height: 100px !important;
  display: block;
}
.div2_con2 > :nth-child(1) {
  height: 30px !important;
  line-height: 30px !important;
}
.div2_con3 {
  margin: 14px 0;
  position: relative;
}
.div2_con3 > span {
  display: block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border: 1px rgb(64, 240, 202) solid;
  border-radius: 5px;
  text-align: center;
}
/* 图片end */
.div2_foot {
  margin: 30px 0;
}



/* 机构信息 end */

/* 机构经营项目 */
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
}
/* 头部搜索 */
.div3_top {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.topBox3_sou >>> .el-input {
  width: 180px;
}
.topBox3_sou > :nth-child(1) {
  margin-right: 10px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}

.topBox3_sou1 >>> .el-input__prefix {
  /* height: 30px !important; */
  display: flex;
  /* justify-content: flex-end; */
  width: 100%;
}
.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
.topBox3_sou1 >>> .el-input__icon.el-icon-date {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
  margin: 0;
  position: absolute;
  top: 0;
  right: 5px;
}
.topBox3_sou1 >>> .el-input__suffix {
  right: 25px;
}
/* 头部搜索end */

/* 机构经营项目end */
</style>